<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> - 概況</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<!--<link rel="shortcut icon" href="favicon.ico"> <link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/new_file.css" rel="stylesheet">-->
	<link rel="shortcut icon" href="favicon.ico"> <link href="__STATIC__/css/bootstrap.min.css" rel="stylesheet">
	<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="__STATIC__/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/css/new_file.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox ">
				<div class="ibox-title">
					<h5>概況</h5>
				</div>
				<div class="toogl_body">
					<div class="ibox-content ibox-jqGrid">
						<p>选择时间段：<input type="text" id="time" class="input-ys" readonly="readonly">
							<input type="button" value="确定" class="input-anniu" id="bt">
						</p>
						<div class="jqGrid_wrapper">
							<table id="table_list_1"></table>
							<div id="pager_list_1"></div>
						</div>
					</div>
					<div class="ibox-content ibox-jqGrid">
						<div class="clients-list">
							<ul class="nav nav-tabs">
								<li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-user"></i> 有效玩家</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-plus-square-o"></i> 新增</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-3"><i class="fa fa-line-chart"></i> 日活</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-4"><i class="fa fa-briefcase"></i> 充值金額</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-5"><i class="fa fa-industry"></i> 充值人数</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-6"><i class="fa fa-line-chart"></i> 总开桌数</a>
								</li>
								<li class=""><a data-toggle="tab" href="#tab-7"><i class="fa fa-line-chart"></i> 总完成桌数</a>
								</li>
							</ul>
							<div class="tab-content">
								<div id="tab-1" class="tab-pane active">
									<div id="box" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-2" class="tab-pane">
									<div id="box2" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-3" class="tab-pane">
									<div id="box3" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-4" class="tab-pane">
									<div id="box4" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-5" class="tab-pane">
									<div id="box5" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-6" class="tab-pane">
									<div id="box6" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
								<div id="tab-7" class="tab-pane">
									<div id="box7" style="width: 100%; height:500px; background-color: pink;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 修改   -->
<div id="myModal7" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div id="gray_Nr">
		<div class="col-sm-6">
			<div class="ibox float-e-margins float-e-margins-2">
				<div class="ibox-title">
					<h5>新增用户详情</h5>
					<div class="ibox-tools" data-dismiss="modal">
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="ibox float-e-margins float-e-border">
						<div class="ibox-content">
							<form class="form-horizontal">
								<div class="gam_bg">
									<div class="gam_bgnrt">
										<span>UID</span>
									</div>
									<div class="gam_bgnrt">
										<span>昵称</span>
									</div>
									<div class="gam_bgnrt">
										<span>注册时间</span>
									</div>

								</div>
								<div id="affiliated_club">
									<!-- <div class="gam_bg">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div>
                                    <div class="gam_bg" ">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="ibox-butz">
					<input class="btn btn-w-m btn-info" type="button" value="确定">
					<input class="btn btn-w-m" type="button" data-dismiss="modal" value="取消">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 日活   -->
<div id="myModal8" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div id="gray_Nr">
		<div class="col-sm-6">
			<div class="ibox float-e-margins float-e-margins-2">
				<div class="ibox-title">
					<h5>日活详情</h5>
					<div class="ibox-tools" data-dismiss="modal">
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="ibox float-e-margins float-e-border">
						<div class="ibox-content">
							<form class="form-horizontal">
								<div class="gam_bg">
									<div class="gam_bgnrt3">
										<span>所属地域</span>
									</div>
									<div class="gam_bgnrt3">
										<span>人数</span>
									</div>

								</div>
								<div id="day_active_user">
									<!-- <div class="gam_bg">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div>
                                    <div class="gam_bg" ">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="ibox-butz">
					<input class="btn btn-w-m btn-info" type="button" value="确定">
					<input class="btn btn-w-m" type="button" data-dismiss="modal" value="取消">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 有效玩家   -->
<div id="myModal9" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div id="gray_Nr">
		<div class="col-sm-6">
			<div class="ibox float-e-margins float-e-margins-2">
				<div class="ibox-title">
					<h5>日活详情</h5>
					<div class="ibox-tools" data-dismiss="modal">
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="ibox float-e-margins float-e-border">
						<div class="ibox-content">
							<form class="form-horizontal">
								<div class="gam_bg">
									<div class="gam_bgnrt3">
										<span>所属地域</span>
									</div>
									<div class="gam_bgnrt3">
										<span>人数</span>
									</div>

								</div>
								<div id="valid_active_user">
									<!-- <div class="gam_bg">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div>
                                    <div class="gam_bg" ">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="ibox-butz">
					<input class="btn btn-w-m btn-info" type="button" value="确定">
					<input class="btn btn-w-m" type="button" data-dismiss="modal" value="取消">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 有效玩家   -->
<div id="myModal10" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div id="gray_Nr">
		<div class="col-sm-6">
			<div class="ibox float-e-margins float-e-margins-2">
				<div class="ibox-title">
					<h5>日活详情</h5>
					<div class="ibox-tools" data-dismiss="modal">
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="ibox float-e-margins float-e-border">
						<div class="ibox-content">
							<form class="form-horizontal">
								<div class="gam_bg">
									<div class="gam_bgnrt3">
										<span>所属地域</span>
									</div>
									<div class="gam_bgnrt3">
										<span>桌数</span>
									</div>

								</div>
								<div id="create_room_num">
									<!-- <div class="gam_bg">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div>
                                    <div class="gam_bg" ">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="ibox-butz">
					<input class="btn btn-w-m btn-info" type="button" value="确定">
					<input class="btn btn-w-m" type="button" data-dismiss="modal" value="取消">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 有效玩家   -->
<div id="myModal11" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div id="gray_Nr">
		<div class="col-sm-6">
			<div class="ibox float-e-margins float-e-margins-2">
				<div class="ibox-title">
					<h5>日活详情</h5>
					<div class="ibox-tools" data-dismiss="modal">
						<a class="close-link">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="panel-body">
					<div class="ibox float-e-margins float-e-border">
						<div class="ibox-content">
							<form class="form-horizontal">
								<div class="gam_bg">
									<div class="gam_bgnrt3">
										<span>所属地域</span>
									</div>
									<div class="gam_bgnrt3">
										<span>桌数</span>
									</div>

								</div>
								<div id="finish_room_num">
									<!-- <div class="gam_bg">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div>
                                    <div class="gam_bg" ">
                                        <div class="gam_bgnrt2">
                                            <span>亲友圈名称</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                        <div class="gam_bgnrt2">
                                            <span>金币数量</span>
                                        </div>
                                    </div> -->
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="ibox-butz">
					<input class="btn btn-w-m btn-info" type="button" value="确定">
					<input class="btn btn-w-m" type="button" data-dismiss="modal" value="取消">
				</div>
			</div>
		</div>
	</div>
</div>
<!--手机导航-->
<div class="to-fdh" style="display: none;">
	<img class="to-imgd" src="__STATIC__/img/phonedh.jpg">
	<div class="mob-nrlb">
		<ul>
			<li>
				<a class="mob-nrdh">管理</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('Player/gameplayer')}">玩家管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('system/notice')}">公告管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('email/mail')}">邮件管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Club/club')}">亲友圈管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Money/money')}">提现管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('Order/order')}">订单管理</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh">数据</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('data/datagk')}">概況</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datawf')}">玩法</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datalc')}">留存</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/datass')}">实时数据</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataczfx')}">充值分析</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/dataclub')}">亲友圈统计</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/president')}">高级会长</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('data/regionaldata')}">地区数据</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="mob-nrdh mob-qbh">权限</a>
				<ul class="mob-nryc">
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_list')}">权限管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('rule/rule_group')}">用户组管理</a>
					</li>
					<li class="mob-nrdhli">
						<a href="{:url('account/account_details')}">后台账号管理</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<div id="zkbg">
	<img src="__STATIC__/img/dp.gif">
</div>
<div class="vnl-zz" style="display:none">
	<div><img src="__STATIC__/img/bqhp.gif"></div>
</div>
<!--手机适配-->
<script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__STATIC__/js/plugins/peity/jquery.peity.min.js"></script>
<script src="__STATIC__/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__STATIC__/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script src="__STATIC__/js/content.js?v=1.0.0"></script>
<script src="__STATIC__/js/plugins/laydate/laydate.js"></script>
<script src="__STATIC__/js/echarts.min.js"></script>
<script src="__STATIC__/js/echarts.common.min.js"></script>
<script>

    //手机适配
    $(function(){
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            $("head").append("<link>");
            var css = $("head").children(":last");
            css.attr({
                rel:  "stylesheet",
                type: "text/css",
                href: "__STATIC__/css/phone_sp.css"
            });
            var mql = window.matchMedia("(orientation: portrait)");
            if(mql.matches) { //竖屏样式
                $(".vnl-zz").show();
                $(".to-fdh").hide();
            }else{
                $(".to-fdh").show();
                $("html").width("100%");
                $("body").width("100%");
            }
            mql.addListener(function(m) {
                if(m.matches) {
                    // 改变到直立方向
                    $(".vnl-zz").show();
                    $(".to-fdh").hide();
                }
                else {
                    $(".to-fdh").show();
                    $(".vnl-zz").hide();
                    $("html").width("100%");
                    $("body").width("100%");
                }
            });
        }
    });
    //导航显示展开
    $(".mob-nrdh").click(function(){
        $(this).next().toggle(".mob-nryc");
    });
    $(".to-imgd").click(function(){
        $(this).next().toggle(".mob-nrlb");
    });
    //手机适配end
	var mydata =[];
	//獲取七天前的數據
    function get7DaysBefore(date){
        var _date = new Date(); //获取今天日期
        _date.setDate(_date.getDate() - 7);//日期回到七天前
        var year=_date.getFullYear();
        var month=_date.getMonth()+1;
        var day=_date.getDate();
        if (month<10) {
            month='0'+month;
        };
        if (day<10) {
            day='0'+day;
        };

        var dateTemp = year+'-'+month+'-'+day;
        _date.setDate(_date.getDate() + 7);//日期重置
        return dateTemp;
    }
    //獲取當前的數據
    function getDaysBefore(date){
        var _date=new Date();
        var year=_date.getFullYear();
        var month=_date.getMonth()+1;
        var day=_date.getDate();
        if (month<10) {
            month='0'+month;
        };
        if (day<10) {
            day='0'+day;
        };
        return year+'-'+month+'-'+day;
        // return [[newDate.getFullYear(), newDate.getMonth() + 1, newDate.getDate()].join('-'), [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()].join(':')].join(' ');
    }
    //所属亲友圈 详情
    function affiliated_club(t){
        $("#affiliated_club").html("");
        var create_time= $(t).parent().parent().children().eq(0).html();
        $.ajax({
            type: "post",
            url: "{:url('data/New_users')}",
            data: {
                'create_time':create_time,
            },
            dataType: "json",
            success: function(e) {
                console.log(e);
                for(i in e){

                    $("#affiliated_club").append('<div class="gam_bg"><div class="gam_bgnrt2"><span>'+e[i].uid+'</span></div><div class="gam_bgnrt2"><span>'+e[i].nickname+'</span></div><div class="gam_bgnrt2"><span>'+e[i].create_time+'</span></div></div>');
                }
            },
            error: function(e) {
                console.log(e);
                // var json = eval("("+e+")");
            }
        });
    }
    //日活跃用户地域详情
    function day_active_user(t){
        $("#day_active_user").html("");
        var create_time= $(t).parent().parent().children().eq(0).html();
        $.ajax({
            type: "post",
            url: "{:url('data/day_active_user')}",
            data: {
                'create_time':create_time,
            },
            dataType: "json",
            success: function(e) {
                console.log(e);
                for(i in e){

                    $("#day_active_user").append('<div class="gam_bg"><div class="gam_bgnrt4"><span>'+e[i].area_name+'</span></div><div class="gam_bgnrt4"><span>'+e[i].day_active_user+'</span></div></div>');
                }
            },
            error: function(e) {
                console.log(e);
                // var json = eval("("+e+")");
            }
        });
    }
    //有效用户数地域详情
    function valid_active_user(t){
        $("#valid_active_user").html("");
        var create_time= $(t).parent().parent().children().eq(0).html();
        $.ajax({
            type: "post",
            url: "{:url('data/valid_active_user')}",
            data: {
                'create_time':create_time,
            },
            dataType: "json",
            success: function(e) {
                console.log(e);
                for(i in e){

                    $("#valid_active_user").append('<div class="gam_bg"><div class="gam_bgnrt4"><span>'+e[i].area_name+'</span></div><div class="gam_bgnrt4"><span>'+e[i].valid_active_user+'</span></div></div>');
                }
            },
            error: function(e) {
                console.log(e);
                // var json = eval("("+e+")");
            }
        });
    }
    //开桌数地域详情
    function create_room_num(t){
        $("#create_room_num").html("");
        var create_time= $(t).parent().parent().children().eq(0).html();
        $.ajax({
            type: "post",
            url: "{:url('data/create_room_num')}",
            data: {
                'create_time':create_time,
            },
            dataType: "json",
            success: function(e) {
                console.log(e);
                for(i in e){

                    $("#create_room_num").append('<div class="gam_bg"><div class="gam_bgnrt4"><span>'+e[i].area_name+'</span></div><div class="gam_bgnrt4"><span>'+e[i].create_room_num+'</span></div></div>');
                }
            },
            error: function(e) {
                console.log(e);
                // var json = eval("("+e+")");
            }
        });
    }
    //完整桌数地域详情
    function finish_room_num(t){
        $("#finish_room_num").html("");
        var create_time= $(t).parent().parent().children().eq(0).html();
        $.ajax({
            type: "post",
            url: "{:url('data/finish_room_num')}",
            data: {
                'create_time':create_time,
            },
            dataType: "json",
            success: function(e) {
                console.log(e);
                for(i in e){

                    $("#finish_room_num").append('<div class="gam_bg"><div class="gam_bgnrt4"><span>'+e[i].area_name+'</span></div><div class="gam_bgnrt4"><span>'+e[i].finish_room_num+'</span></div></div>');
                }
            },
            error: function(e) {
                console.log(e);
                // var json = eval("("+e+")");
            }
        });
    }

    $(function() {
        var start_time = get7DaysBefore()+" "+"00:00:00";
        var end_time = getDaysBefore()+" "+"23:59:59";
        // console.log(start_time);
        // console.log(end_time);
        $.ajax({
            url: '__URL__/Overview',
            data: {
                "start_time": start_time, //开始日期
                "end_time":end_time // 结束日期
            },
            dataType: "json",
            type: "post",
            success: function(e) {
                // console.log(e);
                var datetime = new Array();
                var day_added_user = new Array();//新增
                var day_active_user = new Array();//日活
                var valid_active_user = new Array();//有效
                var recharge_total_amount = new Array();//充值金额
                var recharge_total_user = new Array();//充值人数
                var create_room_num = new Array();//总开桌数
                var finish_room_num = new Array();//总完成桌数
                $("#table_list_1").jqGrid("clearGridData");
                for(i  in e ){
                    mydata = {
                        datetime: e[i].datetime, //时间
                        // day_added_user: e[i].day_added_user,//新增
                        day_added_user:'<input type="button" value="'+e[i].day_added_user+'" data-toggle="modal" data-target="#myModal7" class="btn btn-info" onclick="affiliated_club(this)"/>',
                        // day_active_user: e[i].day_active_user,//日活
                        day_active_user:'<input type="button" value="'+e[i].day_active_user+'" data-toggle="modal" data-target="#myModal8" class="btn btn-info name"  id="" onclick="day_active_user(this)"/>',
                        // valid_active_user: e[i].valid_active_user,//有效
                        valid_active_user:'<input type="button" value="'+e[i].valid_active_user+'" data-toggle="modal" data-target="#myModal9" class="btn btn-info name"  id="" onclick="valid_active_user(this)"/>',
                        recharge_total_amount: e[i].recharge_total_amount,//充值金额
                        recharge_total_user: e[i].recharge_total_user,//充值人数
                        // create_room_num: e[i].create_room_num,//总开桌数
                        create_room_num:'<input type="button" value="'+e[i].create_room_num+'" data-toggle="modal" data-target="#myModal10" class="btn btn-info name"  id="" onclick="create_room_num(this)"/>',
                        // finish_room_num: e[i].finish_room_num,//总完成桌数
                        finish_room_num:'<input type="button" value="'+e[i].finish_room_num+'" data-toggle="modal" data-target="#myModal11" class="btn btn-info name"  id="" onclick="finish_room_num(this)"/>',
                    };

                    datetime.push(e[i].datetime);
                    day_added_user.push(e[i].day_added_user);
                    day_active_user.push(e[i].day_active_user);
                    valid_active_user.push(e[i].valid_active_user);
                    recharge_total_amount.push(e[i].recharge_total_amount);
                    recharge_total_user.push(e[i].recharge_total_user);
                    create_room_num.push(e[i].create_room_num);
                    finish_room_num.push(e[i].finish_room_num);
                	
                    $("#table_list_1").addRowData(i, mydata, "last");
                }
            		datetime.reverse();
                    day_added_user.reverse();
                    day_active_user.reverse();
                    valid_active_user.reverse();
                    recharge_total_amount.reverse();
                    recharge_total_user.reverse();
                    create_room_num.reverse();
                    finish_room_num.reverse();
                var myChart = echarts.init(document.getElementById("box"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: datetime,
                        type: 'line',
                        data: valid_active_user
                    }]
                };
                myChart.setOption(option);



                var myChart2 = echarts.init(document.getElementById("box2"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: datetime,
                        type: 'line',
                        data: day_added_user
                    }]
                };
                myChart2.setOption(option);


                var myChart3 = echarts.init(document.getElementById("box3"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: {
                        // name: datetime,
                        type: 'line',
                        data: day_active_user
                    }
                };
                myChart3.setOption(option);



                var myChart4 = echarts.init(document.getElementById("box4"));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: datetime
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: recharge_total_amount,
                        type: 'bar'
                    }]
                };
                myChart4.setOption(option);





                var myChart5 = echarts.init(document.getElementById("box5"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: recharge_total_user
                    }
                    ]
                };
                myChart5.setOption(option);


                var myChart6 = echarts.init(document.getElementById("box6"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: create_room_num
                    }]
                };
                myChart6.setOption(option);


                var myChart7 = echarts.init(document.getElementById("box7"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: finish_room_num
                    }]
                };
                myChart7.setOption(option);


                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    myChart.resize();
                    myChart2.resize();
                    myChart3.resize();
                    myChart4.resize();
                    myChart5.resize();
                    myChart6.resize();
                    myChart7.resize();
                })
                window.onresize = function(){
                    var temp_chart = echarts.init(document.getElementById(char_id));
                    temp_chart.resize();
                };
                $("#table_list_1").setGridParam().trigger("reloadGrid");
            },
            error: function(e) {
            }
        });
    });
	$("#bt").on('click', function() {

        var time = $("#time").val();
        if(time == ""){
            alert("请选择日期");
            return false;
        }
        var start_time = time.substring(0,10)+" "+"00:00:00";
        var end_time = time.substring(13)+" "+"23:59:59";
        $.ajax({
            url: '__URL__/Overview',
            data: {
                "start_time": start_time, //开始日期
                "end_time":end_time // 结束日期
            },
            dataType: "json",
            type: "post",
            success: function(e) {
                // console.log(e);
                var datetime = new Array();
                var day_added_user = new Array();//新增
                var day_active_user = new Array();//日活
                var valid_active_user = new Array();//有效
                var recharge_total_amount = new Array();//充值金额
                var recharge_total_user = new Array();//充值人数
                var create_room_num = new Array();//总开桌数
                var finish_room_num = new Array();//总完成桌数
                $("#table_list_1").jqGrid("clearGridData");
                for(i  in e ){
                    // mydata = {
                    //     datetime: e[i].datetime, //时间
                    //     day_added_user:'<input type="button" value="'+e[i].day_added_user+'" data-toggle="modal" data-target="#myModal7" class="btn btn-info" onclick="affiliated_club(this)"/>',
                    //     // day_active_user: e[i].day_active_user,//日活
                    //     day_active_user:'<input type="button" value="'+e[i].day_active_user+'" data-toggle="modal" data-target="#myModal7" class="btn btn-info" onclick="affiliated_club(this)"/>',
                    //     valid_active_user: e[i].valid_active_user,//有效
                    //     recharge_total_amount: e[i].recharge_total_amount,//充值金额
                    //     recharge_total_user: e[i].recharge_total_user,//充值人数
                    //     create_room_num: e[i].create_room_num,//总开桌数
                    //     finish_room_num: e[i].finish_room_num,//总完成桌数
                    // };
                    mydata = {
                        datetime: e[i].datetime, //时间
                        // day_added_user: e[i].day_added_user,//新增
                        day_added_user:'<input type="button" value="'+e[i].day_added_user+'" data-toggle="modal" data-target="#myModal7" class="btn btn-info" onclick="affiliated_club(this)"/>',
                        // day_active_user: e[i].day_active_user,//日活
                        day_active_user:'<input type="button" value="'+e[i].day_active_user+'" data-toggle="modal" data-target="#myModal8" class="btn btn-info name"  id="" onclick="day_active_user(this)"/>',
                        // valid_active_user: e[i].valid_active_user,//有效
                        valid_active_user:'<input type="button" value="'+e[i].valid_active_user+'" data-toggle="modal" data-target="#myModal9" class="btn btn-info name"  id="" onclick="valid_active_user(this)"/>',
                        recharge_total_amount: e[i].recharge_total_amount,//充值金额
                        recharge_total_user: e[i].recharge_total_user,//充值人数
                        // create_room_num: e[i].create_room_num,//总开桌数
                        create_room_num:'<input type="button" value="'+e[i].create_room_num+'" data-toggle="modal" data-target="#myModal10" class="btn btn-info name"  id="" onclick="create_room_num(this)"/>',
                        // finish_room_num: e[i].finish_room_num,//总完成桌数
                        finish_room_num:'<input type="button" value="'+e[i].finish_room_num+'" data-toggle="modal" data-target="#myModal11" class="btn btn-info name"  id="" onclick="finish_room_num(this)"/>',
                    };
                    datetime.push(e[i].datetime);
                    day_added_user.push(e[i].day_added_user);
                    day_active_user.push(e[i].day_active_user);
                    valid_active_user.push(e[i].valid_active_user);
                    recharge_total_amount.push(e[i].recharge_total_amount);
                    recharge_total_user.push(e[i].recharge_total_user);
                    create_room_num.push(e[i].create_room_num);
                    finish_room_num.push(e[i].finish_room_num);
                	
                    $("#table_list_1").addRowData(i, mydata, "last");
				}
            		datetime.reverse();
                    day_added_user.reverse();
                    day_active_user.reverse();
                    valid_active_user.reverse();
                    recharge_total_amount.reverse();
                    recharge_total_user.reverse();
                    create_room_num.reverse();
                    finish_room_num.reverse();
                var myChart = echarts.init(document.getElementById("box"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: datetime,
                        type: 'line',
                        data: valid_active_user
                    }]
                };
                myChart.setOption(option);



                var myChart2 = echarts.init(document.getElementById("box2"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: []
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: datetime,
                        type: 'line',
                        data: day_added_user
                    }]
                };
                myChart2.setOption(option);


                var myChart3 = echarts.init(document.getElementById("box3"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: {
                        // name: datetime,
                        type: 'line',
                        data: day_active_user
                    }
                };
                myChart3.setOption(option);



                var myChart4 = echarts.init(document.getElementById("box4"));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: datetime
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: recharge_total_amount,
                        type: 'bar'
                    }]
                };
                myChart4.setOption(option);

                var myChart5 = echarts.init(document.getElementById("box5"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: recharge_total_user
                    }
                    ]
                };
                myChart5.setOption(option);



                var myChart6 = echarts.init(document.getElementById("box6"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: create_room_num
                    }]
                };
                myChart6.setOption(option);


                var myChart7 = echarts.init(document.getElementById("box7"));
                var option = {
                    // 给echarts图设置背景色
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: datetime
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        // boundaryGap: false,
                        data: datetime
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // name: '今日',
                        type: 'line',
                        data: finish_room_num
                    }]
                };
                myChart7.setOption(option);



                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    myChart.resize();
                    myChart2.resize();
                    myChart3.resize();
                    myChart4.resize();
                    myChart5.resize();
                    myChart6.resize();
                    myChart7.resize();
                    // myChart8.resize();
                })
                window.onresize = function(){
                    var temp_chart = echarts.init(document.getElementById(char_id));
                    temp_chart.resize();
                };
                $("#table_list_1").setGridParam().trigger("reloadGrid");
            },
			error: function(e) {
            }
        });
	})
        $(document).ready(function () {

        $.jgrid.defaults.styleUI = 'Bootstrap';
        // Examle data for jqGrid
        // var mydata = [
        //     {
        //         id: "1",
        //         invdate: "2010-05-24",
        //         name: "test",
        //         note: "note",
        //         tax: "10.00",
        //         total: "2111.00"
        //     }
        // ];

        // Configuration for jqGrid Example 1
        $("#table_list_1").jqGrid({
            data: mydata,
            datatype: "local",
            height: 250,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [20,50,100],
            colNames: ['日期', '新增', '日活', '有效玩家', '充值金额', '充值人数', '总开桌数', '总完成桌数'],
            colModel: [
                {
                    name: 'datetime',
                    index: 'datetime',
                    width: 60,
                    sorttype: "int",
                    align:"center"
                },
                {
                    name: 'day_added_user',
                    index: 'day_added_user',
                    width: 90,
                    // sorttype: "date",
                    // formatter: "date",
                    align:"center"
                },
                {
                    name: 'day_active_user',
                    index: 'day_active_user',
                    width: 100,
                    align:"center"
                },
                {
                    name: 'valid_active_user',
                    index: 'valid_active_user',
                    width: 80,
                    // sorttype: "float",
                    // formatter: "number",
                    align:"center"
                },
                {
                    name: 'recharge_total_amount',
                    index: 'recharge_total_amount',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'recharge_total_user',
                    index: 'recharge_total_user',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                },
                {
                    name: 'create_room_num',
                    index: 'create_room_num',
                    width: 150,
                    sortable: false,
                    align:"center"
                },
                {
                    name: 'finish_room_num',
                    index: 'finish_room_num',
                    width: 80,
                    sorttype: "float",
                    align:"center"
                }
            ],
            pager: "#pager_list_1",
            loadonce: true,
            viewrecords: true,
            caption: "概况",
            hidegrid: false
        });
        // Add responsive to jqGrid

        
		setTimeout(function(){
            var width = $('.jqGrid_wrapper').width();
            $('#table_list_1').setGridWidth(width);
		},500);
        
        
    });

    laydate.render({
        elem: '#time',
        range: true
    });
</script>
</body>

</html>